<template>
  <div class="communication-wrapper">
    <portal-header :current-index="currentIndex" />
    <div class="communication-banner c-white">
      <div class="w-content">
        <div class="communication-title w-100 fs-48 fw-700 d-flex flex-jc-c">互动交流</div>
        <div class="w-100 d-flex flex-jc-c fs-18">
          <div class="communication-button d-flex flex-jc-c flex-ai-c" @click="showAdviceDialog(0)">
            <img :src="zxImg">我要咨询
          </div>
          <div class="communication-button d-flex flex-jc-c flex-ai-c left-2" @click="showAdviceDialog(1)">
            <img :src="jyImg">我要建议
          </div>
        </div>
      </div>
    </div>
    <div class="w-content search-container ">
      <el-input
        v-model="listQuery.content"
        placeholder="请输入内容"
        class="input-with-select"
        style="font-size: 20px;height: 56px;"
      >
        <el-select
          slot="prepend"
          v-model="listQuery.type"
          placeholder=""
          style="width: 100px;background-color: #ffffff;height: 50px;font-size: 20px;"
        >
          <el-option label="全部" value="-1" />
          <el-option label="咨询" value="1" />
          <el-option label="建议" value="2" />
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          style="background-color: #0279FF;color: #ffffff;height: 56px; width: 156px;font-size: 20px;"
          @click="queryList"
        >搜索
        </el-button>
      </el-input>
    </div>

    <div class="communication-content">
      <div class="breadcrumb-wrapper">
        <div class="w-content d-flex flex-ai-c">
          <nav>
            <ol class="breadcrumb d-flex fs-16">
              <li class="breadcrumb-item c-999"><a href="#" @click.prevent="goToSys(0)">首页</a></li>
              <li class="breadcrumb-item active" aria-current="page">互动交流</li>
            </ol>
          </nav>
        </div>
      </div>
      <div class="w-content">
        <el-table :data="list" border fit stripe highlight-current-row>
          <el-table-column align="center" label="信件编号" prop="id" width="200">
            <template slot-scope="{row}">
              COMM{{ row.id }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="信件内容" prop="content">
            <template slot-scope="scope">
              <div class="table-text" @click="showViewAdvice(scope.$index)">{{ scope.row.content }}</div>
            </template>
          </el-table-column>

          <el-table-column align="center" label="信件分类" prop="type" width="200">
            <template slot-scope="{row}">
              <el-tag :type="row.type === 1 ? 'success' : 'info'">
                <span v-if="row.type === 1">咨询</span>
                <span v-if="row.type ===2">建议</span>
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" label="回复时间" prop="replyTime" width="200">
            <template slot-scope="{row}">
              {{ row.replyTime | formatDate }}
            </template>
          </el-table-column>
        </el-table>
        <div class="page-nav-wrap">
          <protal-pagination
            v-show="total>0"
            :total="total"
            :layout="layout"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="queryList"
          />
        </div>
      </div>
    </div>
    <portal-footer />
    <el-dialog
      title=""
      :visible.sync="dialogEditVisible"
      width="800px"
      @close="dialogEditVisible = false"
    >
      <div class="login-container">
        <div class="request-quote-form">
          <form @submit.native.prevent>
            <div class="w-100 request-title m-0-auto">
              {{ currentInteractionType === 1 ? '我要咨询' : '我要建议' }}
              <img :src="jlBg">
            </div>
            <div class="w-100">
              <textarea v-model="adviceForm.content" type="text" placeholder="请填写内容" />
            </div>
            <div class="w-100 d-flex flex-jc-sb">
              <div class="w-49"><input v-model="adviceForm.email" type="email" placeholder="电子邮件"></div>
              <div class="w-49"><input v-model="adviceForm.mobile" type="tel" placeholder="联系电话"></div>
            </div>
            <div class="w-100 d-flex flex-jc-sb">
              <div class="w-49"><input v-model="adviceForm.captcha" type="email" placeholder="验证码"></div>
              <div class="w-49"><img
                :src="captchaImgUrl"
                alt="验证码"
                style="width: 160px"
                @click="refreshCaptcha"
              ></div>
            </div>
            <div class="w-100">
              <input type="submit" class="theme-btn" value="提 交" @click="submitAdvice">
            </div>
          </form>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title=""
      :visible.sync="dialogViewVisible"
      width="800px"
      @close="dialogViewVisible = false"
    >
      <div v-if="dialogViewVisible" class="login-container">
        <div class="request-quote-form  ">
          <div class="w-100 request-title m-0-auto">
            互动内容
            <img :src="jlBg">
          </div>
          <div class="w-100 fs-16">
            <div class="advice-title fw-700">留言信息</div>
            <div class="advice-question w-100 m-t-24 d-flex flex-start">
              <div class="w-15 c-666">留言内容：</div>
              <div class="w-85 right">{{ currentRow.content }}</div>
            </div>
          </div>
          <div class="w-100 fs-16">
            <div class="advice-title fw-700 m-t-24">回复信息</div>
            <div class="advice-answer-time w-100 m-t-24 d-flex flex-start">
              <div class="w-15 c-666">回复时间：</div>
              <div class="w-85">{{ currentRow.replyTime | formatDate }}</div>
            </div>
            <div class="advice-answer-content w-100 m-t-24  d-flex flex-start">
              <div class="w-15 c-666">回复内容：</div>
              <div class="w-85">{{ currentRow.replyContent }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from '@/utils/formatdate'
import PortalHeader from './components/PortalHeader'
import PortalFooter from './components/PortalFooter'
import ProtalPagination from './components/Pagination'
import portalUtil from '@/utils/portal-util'
import { messageboardCreate, messageboardList } from '@/api/rest/portal/portal'

export default {
  name: 'PortalCommunication',
  components: { PortalHeader, PortalFooter, ProtalPagination },
  filters: {
    formatDate(val) {
      if (val) {
        return formatDate(val)
      }
    }
  },
  data() {
    return {
      dialogEditVisible: false,
      dialogViewVisible: false,
      captchaImgUrl: process.env.VUE_APP_BASE_API + '/api/kaptcha/image',
      adviceForm: {
        content: '',
        email: '',
        mobile: '',
        type: null,
        captcha: ''
      },
      currentInteractionType: 1,
      interactionType: [
        { id: 1, name: '我要咨询', icon: 'el-icon-connection', placeholder: '请输入咨询内容' },
        { id: 2, name: '我要建议', icon: 'el-icon-question', placeholder: '请输入建议内容' }
      ],
      currentIndex: 4,
      zxImg: require('@/assets/portal_images/zx.png'),
      jyImg: require('@/assets/portal_images/jy.png'),
      jlBg: require('@/assets/portal_images/jl_bg.png'),
      searchContent: null,
      select: '-1',
      list: [],
      layout: 'total, prev, pager, next',
      total: 0,
      listQuery: {
        content: null,
        type: '-1',
        page: 1,
        limit: 10
      },
      currentRow: { content: '', replyContent: '', replyTime: '' }
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    showViewAdvice(index) {
      this.currentRow = { ...this.list[index] }
      this.dialogViewVisible = true
    },
    showAdviceDialog(index) {
      this.currentInteractionType = this.interactionType[index].id
      this.refreshCaptcha()
      this.dialogEditVisible = true
    },
    refreshCaptcha() {
      this.captchaImgUrl = process.env.VUE_APP_BASE_API + '/api/kaptcha/image?' + new Date().getTime()
    },
    queryList() {
      const query = { ...this.listQuery }
      if (query.type === '-1') {
        query.type = null
      }
      messageboardList(query).then(response => {
        this.list = response.data.items
        this.total = response.data.total
      })
    },
    goToSys(index) {
      portalUtil.gotoPageIndex(this, index, {})
    },
    submitAdvice(event) {
      event.preventDefault()
      if (this.adviceForm.content === '' || this.adviceForm.content === null) {
        this.$message({
          message: '请填写内容',
          type: 'error'
        })
        // } else if (this.adviceForm.captcha === '' || this.adviceForm.captcha === null) {
        //   this.$message({
        //     message: '请填写验证码',
        //     type: 'error'
        //   })
      } else if (this.adviceForm.email && !/^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(this.adviceForm.email)) {
        this.$message({
          message: '请填写正确的邮箱地址',
          type: 'error'
        })
      } else if (this.adviceForm.mobile && !/^1[3456789]\d{9}$/.test(this.adviceForm.mobile) && !/^((0\d{2,3})-)(\d{7,8})(-(\d[1-4]))?$/.test(this.adviceForm.mobile)) {
        this.$message({
          message: '请填写正确的手机号',
          type: 'error'
        })
      } else {
        // 提交意见征集
        this.adviceForm.type = this.currentInteractionType
        messageboardCreate(this.adviceForm).then(response => {
          const data = response.data
          if (data) {
            this.dialogEditVisible = false
            this.$message({
              message: '内容提交成功，感谢您的留言！',
              type: 'success'
            })
            this.adviceForm = {
              content: '',
              email: '',
              mobile: '',
              type: null,
              captcha: ''
            }
          }
        }).catch(() => {
        })
      }
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/portal/common.scss';
</style>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.communication-wrapper {
  position: relative;

  .communication-banner {
    background: url('~@/assets/portal_images/communication_banner_bg.png') no-repeat;
    background-size: 100% 100%;
    height: 438px;
    padding-top: 64px;

    .communication-title {
    }

    .communication-desc {
      margin-top: 24px;
      text-align: center;
      line-height: 30px;
    }

    .communication-button {
      margin-top: 32px;
      width: 178px;
      height: 56px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid #FFFFFF;
      cursor: pointer;

      img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }

      &:hover {
        background: rgba(255, 255, 255, 0.16);
      }
    }

    .left-2 {
      margin-left: 108px;
    }
  }

  .communication-content {
    background: url('~@/assets/portal_images/communication_content_bg.png');
    background-size: 100% 100%;
    position: relative;
    padding-top: 60px;
  }

  .page-nav-wrap {
    text-align: center;
    padding: 40px 0;
  }
}

.search-container {
  background: url('~@/assets/portal_images/search_bg.png') no-repeat;
  width: 1200px;
  height: 168px;
  position: absolute;
  top: 460px;
  left: calc(50% - 600px);
  padding: 24px;
  z-index: 100;
}

::v-deep .el-input__inner {
  height: 56px;
}

::v-deep .el-table thead {
  color: #ffffff;
  font-weight: 500;
  font-size: 18px;
  line-height: 48px;
}

::v-deep .el-table th.is-leaf, .el-table td {
  border-bottom: 1px solid #dfe6ec;
  background-color: $portalBlueColor !important;
}

::v-deep .el-table__row {
  font-size: 18px;
  cursor: pointer;
}

::v-deep .table-text {
  line-height: 36px;
}

::v-deep .current-row {
  color: $portalBlueColor !important;
}

.table-text {
  width: 90%;
  white-space: nowrap; //禁止换行
  overflow: hidden;
  text-overflow: ellipsis; //...
  text-align: left;
}

.request-quote-form {
  width: 90%;
  margin: 24px auto;
  font-size: 16px;
  color: #222222;

  .request-title {
    font-size: 20px;
    font-weight: 700;
    padding: 0px 0 32px 0;
    position: relative;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 24px;
    position: relative;

    img {
      width: 207px;
      height: 98px;
      position: absolute;
      right: -50px;
      top: -40px;
    }
  }

  .request-title::after {
    content: "";
    /* position: absolute; */
    display: block;
    width: 8%;
    height: 10px;
    left: 45%;
    margin-left: 45%;
    margin-top: -10px;
    bottom: 0px;
    background: RGBA(2, 121, 255, .5);
    z-index: 0;
  }

  textarea {
    width: 100%;
    height: 150px;
    margin-top: 12px;
    padding-left: 12px;
    padding-top: 12px;
    border: 1px solid #DEDFDF;
  }

  input {
    margin-top: 12px;
    width: 100%;
    height: 56px;
    padding-left: 12px;
    border: 1px solid #DEDFDF;
  }

  img {
    width: 100%;
    margin-top: 12px;
    height: 56px;
    padding-left: 12px;
  }

  .theme-btn {
    margin-top: 24px;
    color: #ffffff;
    background-color: $portalBlueColor;
    cursor: pointer;
  }

  .advice-title {
    border-left: 3px solid $portalBlueColor;
    padding-left: 6px;
  }

  .m-t-24 {
    margin-top: 24px;
  }

  .left {
    width: 240px;
  }
}

</style>
